<template>
	<view class="goods-details">
		<SkeletonGoodsDetetails v-if="!isfinish"></SkeletonGoodsDetetails>
		<scroll-view class="details" scroll-y v-else>
			<view class="logo">
				<!-- aspectFit保持纵横比，高度被截取 -->
				<image :src="goodsDetails.goods_big_logo" mode="aspectFit" style="width: 100%; "></image>
			</view>
			<view class="price">
				￥{{goodsDetails.price}}
			</view>
			<view class="name">
				{{goodsDetails.name}}
			</view>
			<hr />
			<view class="num">
				
				<text class="tag">数量</text>
				<view class="num-oper">
					<view @tap="op(-1)">-</view>
					<view>{{num}}</view>
					<view @tap="op(1)">+</view>
				</view>
			</view><hr color="grey"  />
			<!-- 商品信息 -->
			<view class="info">
				
				<view class="brand">
					<text class="tag">品牌</text>{{goodsDetails.brandname}}
				</view>
				<view class="type">
					<text class="tag">类别</text>{{goodsDetails.cat_one_name}}
				</view>
				<view class="weight">
					<text class="tag">重量</text>{{goodsDetails.weight}}
				</view>
				<view class="uptime">
					<text class="tag">上架时间</text>{{goodsDetails.add_time}}
				</view>
			</view>
			<!-- 商品介绍 -->

			<view class="intro" v-html="goodsDetails.introduce">

			</view>
		</scroll-view>
		<uni-goods-nav @click="" style="position: fixed;bottom: 0; width:100%" />

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import SkeletonGoodsDetetails from '@/component/SkeletonGoodsDetails/SkeletonGoodsDetetails.vue'


	let isfinish = ref(false)
	onLoad((data) => {
		console.log(data.id)
		getGoodsDetails(data.id)
	})

	const goodsDetails = ref({})
	async function getGoodsDetails(id) {
		isfinish.value = false
		uni.showLoading({
			title: '正在加载'
		})
		let res = await uni.$post("/goodInfoById", {
			id
		})
		if (res.code == 200) {
			isfinish.value = true
			uni.hideLoading()
			goodsDetails.value = res.goodsList[0]
			goodsDetails.value.goods_big_logo = uni.$base_url + goodsDetails.value.goods_big_logo
		}
		console.log(goodsDetails.value)
	}
	const num = ref(1)

	function op(n) {
		num.value += n
		if (num.value < 0) {
			num.value = 0
		}
	}
</script>

<style lang="scss">
	.details {
		padding: 0 10rpx;
		height: calc(100vh - 97px);
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */

		.price {
			color: $uni-price-color;
			font-size: $uni-font-size-lg;
			margin: 5rpx 0;
		}

		.name {
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			background-color: #fff;
			margin-top: 3rpx;
			padding: 10px;
			color: #666;
		}

		.price {
			background-color: #fff;
			font-size: 35rpx;
			color: #f00;
			padding: 10px;

		}

		.num {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 10px;
		}

		.num .num-oper {
			display: flex;
			margin-right: 10px;
			align-items: center;
		}

		.num .num-oper view {
			width: 20px;
			height: 20px;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 20px;
			font-size: 25rpx;
		}

		.info {
			
			margin-top: 10px ;
			background-color: #fff;
			padding: 10px;

		}

		.info view {
			margin-bottom: 10px;
		}

		.intrduce {
			margin-top: 5px;
			background-color: #fff;
			padding: 10px;
			line-height: 1.7em;

		}

	}

	.tag {
		background-color: #ff6700;
		border-radius: 5px;
		padding: 3px 5px;
		color: #fff;
		font-size: 25rpx;
		margin-right: 10px;
	}



	.goods-carts {
		border: 1px solid green;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>